<template>
  <div class="page">
    <div class="layui-fluid">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
          <div class="layui-card">
            <div class="layui-card-body">
              <div class="layui-form" lay-filter style="font-size:15px">
                <div class="layui-form-item">
                  <label class="layui-form-label">栏目分类名称</label>
                  <div class="layui-input-block" style="width: 190px;">
                    <input
                      type="text"
                      name="categoryName"
                      v-model="itemData.categoryName"
                      placeholder="输入栏目分类名称"
                      autocomplete="off"
                      class="layui-input"
                    />
                  </div>
                </div>

                <div class="layui-form-item" id="test1">
                  <label class="layui-form-label">上级栏目分类</label>
                  <div class="layui-input-block" style="width: 190px;">
                    <select name="categoryId" lay-filter="categoryId" v-model="itemData.categoryId">
                      <option value="">请选择</option>
                      <option value="0">顶级栏目分类</option>
                    </select>
                  </div>
                </div>

                <div class="layui-form-item">
                  <label class="layui-form-label">位置排序</label>
                  <div class="layui-input-block" style="width: 190px;">
                    <input
                      type="text"
                      name="rank"
                      v-model="itemData.rank"
                      placeholder="输入位置排序"
                      autocomplete="off"
                      class="layui-input"
                    />
                  </div>
                </div>


                 <div class="layui-form-item" id="test2">
                  <label class="layui-form-label">选择布局模式</label>
                  <div :class="item.id==itemData.layout.id?'layui-input-inline type-active':'layui-input-inline'"  v-for="(item,index) in bjlist" :key="index" style="width: 60px;" @click="bjtype(index)" >
                      <img name='rankimg' src="../../../assets/thumbnail1.png" :style="index==0?'width:60px;height:60px;':'display:none'" />
                      <img name='rankimg' src="../../../assets/thumbnail2.png" :style="index==1?'width:60px;height:60px;':'display:none'" />
                      <img name='rankimg' src="../../../assets/thumbnail3.png" :style="index==2?'width:60px;height:60px;':'display:none'" />
                      <img name='rankimg' src="../../../assets/thumbnail4.png" :style="index==3?'width:60px;height:60px;':'display:none'" />
                    </div> 
                </div>
								<div class="layui-form-item" v-if="itemData.layout.id==4">
                  <label class="layui-form-label">选择数据来源</label>
                  <div class="layui-input-block" style="width: 190px;">
                    <select name="categoryId" lay-filter="datefrom" v-model="itemData.datefrom">
                      <option value="2">所属门店</option>
                      <option value="5">推荐商品</option>
                    </select>
                  </div>
                </div>
                <div class="layui-form-item">
                  <div class="layui-input-block">
                    <button class="layui-btn layui-btn-normal" @click="sure">确认</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  name: "storecategory",
  data() {
    return {
      id: "",
      itemData: {
        categoryId:'',
        categoryName: "", //栏目分类名称
        rank: "", //位置排序
        layout: {
          id: "",
          image: "",
          layoutName: "",
        }, //布局方式
        targetType:"",
        datefrom:5
      },
      bjlist:[],
    };
  },
  mounted() {
    this.getbj(); //布局模式
    var _this = this;
    window.getdates = this.getdates;
  },
  methods: {
    getdates: function (data) {
      var _this = this;
      var url = "/advert/bapi/v1.9/category/" + data.id;
      ajaxRequest(url, "GET", "json", "", function(ret, err) {
          _this.itemData = ret.data;
          _this.itemData.datefrom=ret.data.targetType
          _this.id = ret.data.id
        });
    },
    sure: function () {
      var _this = this;
      var hat = "POST";
      var dates = _this.itemData;
      dates.rank = Number(_this.itemData.rank)
      if (_this.id) {
        dates.id = _this.id;
        hat = "PUT";
      }
      dates.targetType=_this.itemData.datefrom
      var url = "/advert/bapi/v1.9/category";
      ajaxRequest(url, hat, "json", dates, function(ret, err) {
        layer.msg("操作成功");
        setTimeout(function() {
          var index = parent.layer.getFrameIndex(window.name);
          parent.layer.close(index);
          parent.location.reload();
        }, 1000);
      });
    },
    bjtype:function (index) {
        var _this = this;
        var arr = _this.bjlist; 
        var parr = []
        for(var i=0;i < arr.length;i++){
            parr.push(arr[i]) 
        }
        _this.itemData.layout = parr[index]
        if(index =='0'){
          _this.itemData.targetType = 3
        }else if(index =='1'){
          _this.itemData.targetType = 4
        }
        else if(index =='3'){
          _this.itemData.targetType = 6
        }
        else{
          _this.itemData.targetType = 5
        }
        // alert(JSON.stringify(_this.itemData.targetType))
      },
    getbj: function() {          
      var _this = this;
      var url = "/advert/aapi/v1.9/layout";
      ajaxRequest(url, "GET", "json", "", function(ret, err) {
        _this.bjlist = ret.data;
      });
    },

  },

  updated: function () {
    var _this = this;
    layui.use("form", function () {
      var form = layui.form;
      form.render();
      form.on('select(categoryId)', function(data){
        _this.itemData.categoryId=data.value;
      });
      form.on('select(datefrom)', function(data){
        _this.itemData.datefrom=data.value;
      });
      if(_this.id){
      document.getElementById("test1").style="pointer-events: none";
      document.getElementById("test2").style="pointer-events: none";
      }else{
      document.getElementById("test1").style="";
      document.getElementById("test2").style="";
     }
    });
  },
};
</script>
<style>
.layui-form-label {
  width: 120px;
}
.layui-input-block {
  margin-left: 150px;
}
.type-active{
    border: 3px solid #f60000;
}
</style>
